<template>
  <div class="app-container">
    <div class="wrap">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="max-height:750px;overflow-y:auto;">
          <div class="wrapTit">企业信息</div>
          <div class="flex-row">
            <custom-button class="custom-button mg-right-20" title="高管信息"  @click="sureShow(1)"></custom-button>
            <custom-button class="custom-button mg-right-20" title="股东信息" @click="sureShow(2)"></custom-button>
            <custom-button class="custom-button mg-right-20" title="供应商" @click="sureShow(3)"></custom-button>
            <custom-button class="custom-button mg-right-20" title="服务商" @click="sureShow(4)"></custom-button>
          </div>
          <el-col :span="12" :gutter="20">
            <div id="text"  v-loading="infoLoading" class="wrapContent">
                <el-form-item label="企业全称：" prop="enterpriseName" class="input_line">
                    <el-input v-model="form.enterpriseName" />
                </el-form-item>
                <el-form-item label="法人代表：" prop="legalRepresentative" class="input_line">
                    <el-input v-model="form.legalRepresentative" />
                </el-form-item>
                <el-form-item label="注册日期：" prop="establishDate" class="input_line">
                    <el-input v-model="form.establishDate" />
                </el-form-item>
                <el-form-item label="注册资本：" prop="registeredCapital" class="input_line">
                    <el-input v-model="form.registeredCapital" />
                </el-form-item>
              <el-form-item label="股票简称：" prop="stockAbbreviation" class="input_line">
                <el-input v-model="form.stockAbbreviation" />
              </el-form-item>
              <el-form-item label="办公地址：" class="input_line">
                <el-input v-model="form.businessAddress" />
              </el-form-item>
              <el-form-item label="工商分类：" class="input_line">
                <el-select v-model="form.classification" filterable placeholder="请选择">
                    <el-option
                    v-for="item in industry"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主要行业：" class="input_line">
                  <el-select v-model="form.mainIndustryId" placeholder="请选择" @change="sureChange">
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        >
                    </el-option>
                  </el-select>
                </el-form-item>
              <el-form-item  class="input_line"  v-show ="twoUP">
                    <el-select v-model="form.IndustryPid" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12" :gutter="20">
            <div v-loading="infoLoading" class="wrapContent">
                <el-form-item label="股票代码：" prop="code" class="input_line" @blur="tan()">
                <el-input v-model="form.stockCode" />
              </el-form-item>
              <el-form-item label="员工总数：" class="input_line">
                <el-input v-model="form.staffNumber" />
              </el-form-item>
                  <el-form-item label="企业官网：" class="input_line">
                <el-input v-model="form.enterpriseWebsite" />
              </el-form-item>
              <el-form-item label="企业邮件：" class="input_line">
                <el-input v-model="form.enterpriseEmail" />
              </el-form-item>
              <el-form-item label="公司简介：" prop="companyProfile" class="input_line">
                <el-input v-model="form.companyProfile" type="textarea" :rows="4" />
              </el-form-item>
              <el-form-item label="经营范围：" prop="companyProfile" class="input_line">
                <el-input v-model="form.companyProfile" type="textarea" :rows="4" />
              </el-form-item>
              <el-form-item label="主要产品及业务描述：" prop="companyProfile" class="input_line">
                <el-input v-model="form.companyProfile" type="textarea" :rows="4" />
              </el-form-item>
            </div>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24" :gutter="20">
          <div style="text-align:center">
            <el-button type="primary" size="medium " @click="submitForm()">保存</el-button>
            <el-button size="medium " @click="cancel()">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 高管信息 -->
    <el-dialog :visible.sync="heightTubeShow" :title="titleDialog" >
        <div style="height:500px;overflow-x:hidden">
          <div class="dialog_input" v-for="(item, index) in seniorExecutiveVoList" :key="index">
            <el-row :gutter="20" class="mg-bottom-10">
              <el-col :span="10">
                <div class="align-center">
                  <div style="flex:1">姓名</div>
                  <el-input style="flex:2" v-model="item.name"></el-input>
                </div>
              </el-col>
              <el-col :span="10">
                <div  class="align-center">
                  <div  style="flex:1">职位</div>
                  <el-input style="flex:2" v-model="item.position"></el-input>
                </div>
              </el-col>
              <el-col :span="1">
                <div  @click="deleteItem(seniorExecutiveVoList,item, index)">
                  <i class="el-icon-delete" ></i>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-button @click="addItem(seniorExecutiveVoList)">添加</el-button>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="shareholderShow" :title="titleDialog" >
      <div style="height:500px;overflow-x:hidden">
        <div class="dialog_input" v-for="(item, index) in shareholderVoList" :key="index">
          <el-row :gutter="20" class="mg-bottom-10">
            <el-col :span="10">
              <div class="align-center">
                <div style="flex:1">发起人/企业</div>
                <el-input style="flex:2" v-model="item.name"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div  class="align-center">
                <div  style="flex:1">占股比例</div>
                <el-input style="flex:2" v-model="item.ratio"></el-input>
              </div>
            </el-col>
            <el-col :span="1">
              <div  @click="deleteItem(shareholderVoList,item, index)">
                <i class="el-icon-delete" ></i>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-button @click="addItem(shareholderVoList)">添加</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="supplierShow" :title="titleDialog" >
      <div style="height:500px;overflow-x:hidden">
        <div class="dialog_input" v-for="(item, index) in supplierVoList" :key="index">
          <el-row :gutter="20" class="mg-bottom-10">
            <el-col :span="10">
              <div class="align-center">
                <div style="flex:1">企业名称</div>
                <el-input style="flex:2" v-model="item.enterpriseName"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div  class="align-center">
                <div  style="flex:1">股票代码</div>
                <el-input style="flex:2" v-model="item.stockCode"></el-input>
              </div>
            </el-col>
            <el-col :span="1">
              <div  @click="deleteItem(supplierVoList,item, index)">
                <i class="el-icon-delete" ></i>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-button @click="addItem(supplierVoList)">添加</el-button>
      </div>
    </el-dialog>
     <el-dialog :visible.sync="customerShow" :title="titleDialog" >
      <div style="height:500px;overflow-x:hidden">
        <div class="dialog_input" v-for="(item, index) in customerVoList" :key="index">
          <el-row :gutter="20" class="mg-bottom-10">
            <el-col :span="10">
              <div class="align-center">
                <div style="flex:1">企业名称</div>
                <el-input style="flex:2" v-model="item.supplier"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div  class="align-center">
                <div  style="flex:1">股票代码</div>
                <el-input style="flex:2" v-model="item.stockCode"></el-input>
              </div>
            </el-col>
            <el-col :span="1">
              <div  @click="deleteItem(customerVoList,item, index)">
                <i class="el-icon-delete" ></i>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-button @click="addItem(customerVoList)">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { sendUpData,getenterprise,getUpDataList } from '@/api/Mycompany/index'
  import { findSeniorExecutivePageByQualityInspection } from './api'
  
  export default {
    data() {
      return {
        titleDialog:'高管信息',
        heightTubeShow:false,
        shareholderShow:false,
        supplierShow:false,
        customerShow:false,
        list: [],
        infoLoading: true,
        form: {},
        record: '',
        rules: {
          fullname: [{ required: true, message: '企业全称不能为空！', trigger: 'blur' }],
          person: [{ required: true, message: '法人代表不能为空！', trigger: 'blur' }],
          money: [{ required: true, message: '注册资本不能为空！', trigger: 'blur' }],
          setdate: [{ required: true, message: '成立日期不能为空！', trigger: 'blur' }],
          introduce: [{ required: true, message: '公司简介不能为空！', trigger: 'blur' }],
        },
        // 
        industry: [{
          value: '个人独资',
          label: '个人独资'
        }, {
          value: '个体工商户',
          label: '个体工商户'
        }, {
          value: '有限公司',
          label: '有限公司'
        }, {
          value: '责任有限公司',
          label: '责任有限公司'
        }, {
          value: '股份有限公司',
          label: '股份有限公司'
        }],
        options:[],
        options1:[],
        dialogId:0,
        twoUP:false,
        seniorExecutiveVoList:[],// 高管
        customerVoList:[],// 服务商
        supplierVoList:[], // 供应商
        shareholderVoList:[],// 股东
        isShow:true,
        dia_title:' 高管信息'

      }
    },
    watch: {
      $router(to, from) {
        // 对路由变化作出响应...
        console.log('upto', to)
        console.log('upfrom', from)
      }
    },
    created() {
      this.getInfo()
      this.getUpData()
    },
    mounted() {
    },
    methods: {
 
      // 默认获取当前企业信息
      async getInfo() {
        findSeniorExecutivePageByQualityInspection().then(response => {
          console.log('djg', response)
        })
        const AllList = await getenterprise()
        this.infoLoading = false
        if(AllList.enterprisePo.industryId !== '0') {
          const twolist = await getUpDataList({id:AllList.enterprisePo.industryId})
          if(twolist.length > 1){
            this.twoUP = true
            twolist.unshift({id:'-1',name:'全部'})
            this.options1 = twolist
          }
        }
        this.form = AllList.enterprisePo
        if(AllList.seniorExecutiveVoList !== null) { this.seniorExecutiveVoList = AllList.seniorExecutiveVoList } // 董事会
        if(AllList.customerVoList !== null) { this.customerVoList = AllList.customerVoList } // 服务商
        if(AllList.supplierVoList !== null) { this.supplierVoList = AllList.supplierVoList } // 供应商
        if(AllList.shareholderVoList !== null) { this.shareholderVoList = AllList.shareholderVoList } // 股东
        if(AllList.holdingCompanyVoList !== null) { this.holdingCompanyVoList = AllList.holdingCompanyVoList } // 参控股公司
      },
      // 获取行业下拉列表
      getUpData() {
        getUpDataList({id:this.dialogId}).then((res) => {
          this.options = res
        })
      },
  // 点击第一个下拉框 获取第二个下啦框数据
      sureChange(val) {
          getUpDataList({id:val}).then((res) => {
            console.log(res)
            if(res.length === 0){
                this.twoUP = false
            }else{
              this.twoUP = true
                this.options1 = res
              if(this.form.IndustryPid === '0') {
                this.form.IndustryPid = this.options1[0].id 
              }
            }
        })
      },
      // 提交内容
      submitForm() {
        sendUpData({ ...this.form,seniorExecutiveVoList:this.seniorExecutiveVoList,customerVoList:this.customerVoList,supplierVoList:this.supplierVoList,shareholderVoList:this.shareholderVoList }).then(response => {
          this.tanForm = response
          this.$router.push({ path: '/maintain/company' })
        })
      },
      // 取消按钮
      cancel() {
        this.$router.push({ path: '/maintain/company' })
      },
      addItem (val) {
        val.push({
          name: '',
          position: ''
        })  
      },
      deleteItem (val,item, index) {
        val.splice(index, 1)
      },
      sureShow(id){
        if(id === 1) {
          this.heightTubeShow = true
          this.titleDialog = '高管信息'
        } else if (id === 2) {
          this.shareholderShow = true
          this.titleDialog = '股东信息'
        }else if (id === 3) {
          this.supplierShow = true
          this.titleDialog = '供应商'
        }else {
          this.customerShow = true
          this.titleDialog = '服务商'
        }
      }
    }
  }
</script>
<style lang="scss">
  .upDialog {
    .el-dialog {
      position: absolute;
      right: 0;
      left: auto;
      height: 96vh;
      margin: 2vh 0 !important;
      .el-dialog__header {
        display: none;
      }
      .strRight {
        text-align: right;
      }
    }
  }
</style>
<style lang="scss" scoped>
::v-deep .el-button--primary{
    background-color: #0099ff;
    border-color: #0099ff;
    
}
::v-deep .el-input__inner{
    width: vw(400px);
}
::v-deep .dialog_input{
  .el-input{
    .el-input__inner{
        width: vw(260px);
    }
  }
}
  // .boeder-box{max-width:vw(736px); max-height: vh(250px); overflow-y: auto;padding-right:-5rem }
  .tanList {
    line-height: 32px;
    height: 92vh;
    overflow: auto;
  }
  .notice {
    padding: 5px 25px 15px;
    margin: 0 0 25px 0;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }
  .main-container {
    background: #f3f4f8;
  }
  .wrap {
    padding: 25px;
    background: #fff;
    border-radius: 4px;
    max-height:vh(820px);
    .el-alert {
      margin-bottom: 15px !important;
    }

    .wrapTit {
      margin: 20px 0;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }

    .wrapContent {
      position: relative;
      width: 100%;
      min-height: 620px;
      padding: 15px;
      font-size: 14px;
      line-height: 36px;
      color: #363636;
    //   border: 1px solid #aeaeae;
      border-radius: 8px;

      .alertMsg {
        position: absolute;
        top: 0;
        left: 20px;
        font-size: 12px;
        font-weight: 600;
        color: #d12f1f;

        i {
          margin-right: 8px;
          font-size: 14px;
        }
      }

      .input_line {
        width: 80%;
        margin: 0 auto 22px;
        line-height: 36px;
        .el-form-item__label {
          line-height: 32px;
        }

        .el-input {
          width: 220px;
          
          .el-input__inner {
            width: 220px;
          }
        }

        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }
      }

      .strLeft {
        text-align: left;

        h4 {
          padding: 0;
          margin: 0;
        }
      }

      .strRight {
        text-align: right;
      }
    }
  }
  .notice h4 {
    font-weight: 700;
    color: #666;
  }
  .notice span {
    font-size: 14px;
    color: #666;
  }
  .app-container {
    padding: 0;
    background: #f3f4f8;
  }
  .per{
    cursor: pointer;
  }
</style>
